<template>
  <div class="page-container">
    <!-- 搜索卡片 -->
    <div class="search-card">
      <el-form :model="searchForm" label-width="80px" class="search-form">
        <el-form-item label="模型名称" class="search-form-item">
          <el-input v-model="searchForm.name" placeholder="请输入模型名称" class="search-input"></el-input>
        </el-form-item>
        <div class="search-buttons">
          <el-button @click="getLists" size="default" class="search-button">查询</el-button>
          <el-button @click="resetSearch" size="default" class="reset-button">重置</el-button>
          <el-button type="primary" @click="handleAdd" size="default" class="add-button" icon="Plus">新增</el-button>
        </div>
      </el-form>
    </div>
    <!-- 模型卡片列表 -->
    <div v-if="lists.length > 0"
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
      <div v-for="item in lists" :key="item.id"
        class="bg-white rounded-lg p-4 border border-gray-200 hover:shadow-md transition-shadow duration-300">
        <!-- 卡片头部 -->
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center space-x-2">
            <div
              class="w-12 h-12  rounded-lg flex items-center justify-center">
                <img src="/assets/images/tpmx.svg" class="w-12 h-12" />
            </div>
            <div>
              <h3 class="text-base font-semibold text-gray-800 hover:text-blue-600 transition-colors truncate">
                {{ item.name }}
              </h3>
              <p class="text-xs text-gray-500">{{ item.model_type_text }}模型</p>
            </div>
          </div>
          <div class="flex items-center space-x-1">
            <el-switch v-model="item.status" size="small" :active-value="1" :inactive-value="2" active-color="#10b981"
              inactive-color="#9ca3af" @change="handleStatusChange(item)" />
            <div class="w-1.5 h-1.5 rounded-full" :class="item.status === 1 ? 'bg-green-400' : 'bg-gray-400'"></div>
          </div>
        </div>

        <!-- 详细信息 -->
        <div class="space-y-2">
          <div v-if="item.manufacturer_name" class="bg-gray-50 rounded p-2">
            <label class="text-xs font-medium text-gray-500 uppercase tracking-wider">模型厂商</label>
            <p class="text-xs text-gray-700 mt-1">{{ item.manufacturer_name }}</p>
          </div>
          <div v-if="item.remark" class="bg-gray-50 rounded p-2">
            <label class="text-xs font-medium text-gray-500 uppercase tracking-wider">备注</label>
            <p class="text-xs text-gray-700 mt-1 line-clamp-2">{{ item.remark }}</p>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
          <div class="flex space-x-1">
            <el-button size="small" type="primary" plain @click="handleAdd(item)" icon="Edit">
              编辑
            </el-button>
            <el-button size="small" type="danger" plain @click="handleDelete(item)" icon="Delete">

              删除
            </el-button>
          </div>
          <div class="text-xs text-gray-400">ID: {{ item.id }}</div>
        </div>
      </div>
    </div>
    <!-- 空状态 -->
    <div v-else class="flex flex-col items-center justify-center py-20">
      <div
        class="w-20 h-20 bg-gradient-to-r from-gray-100 to-gray-200 rounded-full flex items-center justify-center mb-4">
        <img src="/assets/images/tpmx.svg" class="w-8 h-8" />
      </div>
      <h3 class="text-lg font-medium text-gray-900 mb-2">
        {{ lists.length > 0 ? '没有找到匹配的模型' : '暂无图片模型' }}
      </h3>
      <el-button v-if="lists.length <= 0" type="primary" @click="handleAdd">
        添加图片模型
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getImageModelListApi, deleteImageModelApi, updateImageModelStatusApi } from '@/api/ai'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
const router = useRouter()
const searchForm = ref({
  name: '',
})

const lists = ref<any[]>([])

const getLists = async () => {
  try {
    const { data } = await getImageModelListApi({
      ...searchForm.value,
    })
    lists.value = data || []
  } catch (error) {
    console.error('获取图片模型列表失败:', error)
    ElMessage.error('获取图片模型列表失败')
  }
}


const handleAdd = (row: any) => {
  //跳转到编辑页面
  router.push({
    path: 'imageModelEdit',
    query: {
      id: row.id,
    },
  })
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确定要删除图片模型「${row.name}」吗？`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      deleteImageModelApi(row.id)
        .then(() => {
          getLists()
          ElMessage.success('删除成功')
        })
        .catch((error) => {
          console.error('删除失败:', error)
          ElMessage.error('删除失败')
        })
    })
    .catch(() => {
      // 用户取消删除
    })
}

const handleStatusChange = async (row: any) => {
  try {
    const statusText = row.status === 1 ? '启用' : '停用'
    await updateImageModelStatusApi({
      id: row.id,
      status: row.status,
    })
    ElMessage.success(`${statusText}成功`)
  } catch (error) {
    console.error('状态更新失败:', error)
    ElMessage.error('状态更新失败')
    // 恢复原来的状态
    row.status = row.status === 1 ? 2 : 1
  }
}

// 搜索方法 - 点击按钮触发
const handleSearchClick = () => {
  // computed属性会自动处理搜索过滤
}

// 清空搜索
const resetSearch = () => {
  searchForm.value = {
    name: '',
  }
  getLists()
}
onMounted(() => {
  getLists()
})
</script>
<style scoped>
/* 搜索卡片样式 */
.search-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}
</style>
